<template>
    <div class="kinditem-root">
        <div class="kinditem-main">
            <div 
                v-for="c in bigKindItem.contain" class="kinditem-main-item"
            >
                <router-link 
                    :to="{path:'/kind/skind',query:{skind:c.smallkind,bkind:bigKindItem.bigkind}}">
                    <img :src="'/img/smallkind/'+c.img" >
                    <p style="color:black">{{c.smallkind}}</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from 'vuex';
export default {
    mounted:function(){
        
    },
    computed:{
        ...mapState([
            "bigkind",
            "bigKindItem"
        ])
    }
}
</script>

<style scoped>
    .head-img{
        width: 100%;
    }
    .kinditem-main{
        width: 100%;
        background-color: #fefefe;
        margin-top: 5px;
        margin-bottom: 20px;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    .kinditem-main-item{
        padding: 10px;
        /*padding-top: 0;*/
        padding-bottom: 5px;
        width: 33.33%;
        text-align: center;
    }
    .kinditem-main-item img{
        width: 100%;
    }
    .kinditem-main-item p{
        font-size: 12px;
    }
</style>